<template>
  <div class="home">
    <el-header class="header">
      <div class="authentication">
        <el-input placeholder="认证ID" v-model="authenId" @keyup.enter.native="searchEnter" @input="getDeviceForm" clearable></el-input>
      </div>
      <div class="input-device">
        <el-input placeholder="请输入设备序列号" v-model="serialNumber" @keyup.enter.native="searchEnter" @input="getDeviceForm" clearable></el-input>
      </div>
      <div class="tip">
            <el-select  placeholder="设备状态" v-model="bindValue" :popper-append-to-body="false" clearable>
               <el-option label="绑定" value="1" @click.native="getBind"/>
               <el-option label="未绑定" value="0" @click.native="getBindNo"/>
            </el-select>
      </div>
      <div class="header-button">
        <el-button type="primary" @click="getDeviceForm">搜索</el-button>
        <el-button type="success" @click="getDeviceForm">重置</el-button>
        <el-button type="info" @click="dialogTableVisibleAdd = true">新增</el-button>
        <el-button type="warning" @click="exportExcel">导出Excel</el-button>
        <el-button type="danger" @click="downLoadTemplate">下载模板</el-button>
        <el-popover placement="top" width="260" v-model="uploadVisible">
          <el-button type="primary" size="mini" >点击上传</el-button>
          <p>请注意，导入表格每一行格式数据要与新增格式保持一致</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="uploadVisible = false">取消</el-button>
            <el-button type="primary" size="mini" @click="uploadVisible = false">确定</el-button>
          </div>
          <el-button type="warning" slot="reference" >批量导入</el-button>
        </el-popover>
      </div>
    </el-header>
    <el-main class="table">
      <el-table :data="tableData" height="320" border style="width: 100%;">
      <el-table-column type="index" label="序号" width="60"></el-table-column>
      <el-table-column prop="authenId" label="认证ID"></el-table-column>
      <el-table-column prop="name" label="设备名称" ></el-table-column>
      <el-table-column prop="groupInfo.name" label="所属单位"></el-table-column>
      <el-table-column prop="employeesInfo.name" label="绑定人员"></el-table-column>
      <el-table-column prop="areaInfo.name" label="巡逻区域"></el-table-column>
      <el-table-column prop="fenceInfo[0].name" label="电子围栏"></el-table-column>
      <el-table-column prop="operation" label="操作">
        <template slot-scope="scope">
        <el-button type="text" @click="editClick(scope.$index, scope.row)" class="edit-button">
          <div class="bottom">
          <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
              <img class="edit" src="../assets/img/编辑.png">
          </el-tooltip>
          </div>
        </el-button>
        <el-popover
          placement="top"
          width="160"
          ref="morePop">
          <p>确定删除？</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="closePop">取消</el-button>
            <el-button type="primary" size="mini" @click="deleteClick(scope.$index, scope.row)">确定</el-button>
          </div>
          <el-button type="text" slot="reference" class="delete-button" >
            <div class="bottom">
              <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
              <img class="delete" src="../assets/img/删除.png">
              </el-tooltip>
            </div>
          </el-button>
        </el-popover>
        <el-popover
          placement="top"
          width="160"
          :ref="`popover-${scope.$index}`"
          v-if="scope.row.bindStatus===1"
         >
          <p>确定解除绑定？</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="closeDeleteWindow(scope)">取消</el-button>
            <el-button type="primary" size="mini" @click="makeUnbind(scope.row.id)">确定</el-button>
          </div>
          <el-button type="text" slot="reference" class="delete-button" >
            <div class="bottom">
              <el-tooltip class="item" effect="dark" content="解除绑定" placement="bottom">
              <img class="lock" src="../assets/img/锁定.png">
              </el-tooltip>
            </div>
          </el-button>
        </el-popover >
        </template>
      </el-table-column>
      </el-table>
      <div class="edit-dialog">
      <el-dialog  title="编辑面板"  :visible.sync="dialogTableVisibleEdit">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="认证ID" prop="authenId">
            <el-input v-model="ruleForm.authenId" :disabled="edit"></el-input>
          </el-form-item>
          <el-form-item label="设备名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="设备序列号" prop="serialNumber">
            <el-input v-model="ruleForm.serialNumber"></el-input>
          </el-form-item>
          <el-form-item label="MAC地址" prop="mac">
            <el-input v-model="ruleForm.mac"></el-input>
          </el-form-item>
          <el-form-item label="所属单位" prop="organizationId">
              <el-cascader
              v-model="ruleForm.organizationId" filterable clearable
              :props="organizationProps"
              :options="organizedOptions">
              </el-cascader>
          </el-form-item>
          <el-form-item label="绑定人员" prop="employeesId">
            <el-select v-model="ruleForm.employeesId" placeholder="请选择" clearable>
              <el-option v-for="item in employeeIds" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="巡逻区域" prop="areaInfo">
            <el-select v-model="ruleForm.areaInfo" placeholder="请选择" clearable>
               <el-option v-for="item in areas" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="电子围栏" prop="electronicFenceIds" clearable>
            <el-select v-model="ruleForm.electronicFenceIds" placeholder="请选择">
              <el-option v-for="item in electronicFence" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitFormChange('ruleForm')">立即修改</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
          </el-form>
      </el-dialog>
      </div>
      <div class="edit-dialog">
      <el-dialog title="新增面板"  :visible.sync="dialogTableVisibleAdd">
          <el-form :model="addForm" :rules="ruleAdd" ref="addForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="认证ID" prop="authenId">
            <el-input v-model="addForm.authenId"></el-input>
          </el-form-item>
          <el-form-item label="设备名称" prop="name">
            <el-input v-model="addForm.name"></el-input>
          </el-form-item>
          <el-form-item label="设备序列号" prop="serialNumber">
            <el-input v-model="addForm.serialNumber"></el-input>
          </el-form-item>
          <el-form-item label="MAC地址" prop="mac">
            <el-input v-model="addForm.mac"></el-input>
          </el-form-item>
          <el-form-item label="所属单位" prop="organizationId">
            <el-cascader
              v-model="addForm.organizationId" filterable clearable
              :props="organizationProps"
              :options="organizedOptions">
              </el-cascader>
          </el-form-item>
          <el-form-item label="绑定人员" prop="employeesId" clearable>
            <el-select v-model="addForm.employeesId" placeholder="请选择">
              <el-option v-for="item in employeeIds" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="巡逻区域" prop="patrolAreaIds" clearable>
            <el-select v-model="addForm.patrolAreaIds" placeholder="请选择">
               <el-option v-for="item in areas" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="电子围栏" prop="electronicFenceIds">
            <el-select v-model="addForm.electronicFenceIds" placeholder="请选择" clearable>
              <el-option v-for="item in electronicFence" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备类型" prop="deviceType">
            <el-select v-model="addForm.deviceType" placeholder="请选择">
              <el-option label="执法仪" value="0"></el-option>
              <el-option label="u盘" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitFormAdd('addForm')">立即创建</el-button>
            <el-button @click="resetForm('addForm')">重置</el-button>
          </el-form-item>
          </el-form>
      </el-dialog>
      </div>
    </el-main>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper, sizes"
        :total="total"
        :tableData="tableData">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getDevice, searchDevice, exportFile, downloadFile, addDevice, deleteDevice, getOrganization, getPerson, getArea, changeDevice, unBind } from '../api/DeviceManage/index'
import { getFence, getTree } from '../api/fence/index'

export default {
  data () {
    return {
      currentPage: 1,
      pageSize: 5,
      total: null,
      bindStatus: '',
      authenId: '',
      id: '', // 搜索关键字
      serialNumber: '',
      name: '',
      // 设备状态绑定值
      bindValue: '',
      uploadVisible: false, // 批量导入按钮
      tableData: null,
      edit: true,
      organizations: [], // 所属单位
      electronicFence: [], // 所属电子围栏
      employeeIds: [], // 绑定人员
      areas: [], // 巡逻区域
      // 编辑面板绑定数
      ruleForm: {
        authenId: '',
        name: '',
        serialNumber: '',
        organizationId: null,
        mac: '',
        employeesId: null,
        patrolAreaIds: null,
        electronicFenceIds: null,
        deviceType: null,
        id: '',
        groupInfo: {
          id: null
        },
        fenceInfo: [{
          id: null
        }],
        areaInfo: []
      },
      // 级联选择器所属单位
      organizedOptions: [],
      organizationProps: {
        label: 'name',
        value: 'id',
        children: 'children',
        checkStrictly: true
      },
      // 新增面板绑定数
      addForm: {
        authenId: '',
        name: '',
        serialNumber: '',
        organizationId: null,
        mac: '',
        employeesId: null,
        patrolAreaIds: null,
        electronicFenceIds: null,
        deviceType: null
      },
      rules: {
        authenId: [
          { required: true, message: '认证ID需以PU开头', trigger: 'blur' },
          { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入设备名称', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
        ],
        serialNumber: [
          { required: true, message: '请输入设备序列号', trigger: 'blur' },
          { min: 8, max: 16, message: '长度在 8 到 16 个字符', trigger: 'blur' }
        ],
        organizationId: [
          { required: true, message: '请选择所属单位', trigger: 'change' }
        ]
      },
      // 增加面板的校验规则
      ruleAdd: {
        authenId: [
          { required: true, message: '认证ID需以PU开头', trigger: 'blur' },
          { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入设备名称', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
        ],
        serialNumber: [
          { required: true, message: '请输入设备序列号', trigger: 'blur' },
          { min: 8, max: 16, message: '长度在 8 到 16 个字符', trigger: 'blur' }
        ],
        organizationId: [
          { required: true, message: '请选择所属单位', trigger: 'change' }
        ]
      },
      dialogTableVisibleEdit: false,
      dialogTableVisibleAdd: false
    }
  },
  watch: {
    bindValue: {
      handler () {
        this.getDeviceForm()
      },
      deep: true
    }
  },
  created () {
    // 级联选择器
    getTree().then((res) => {
      console.log('查看组织树')
      console.log(res)
      this.organizedOptions = res.data.data
    })
  },
  mounted () {
    this.getDeviceForm()
    this.getOrganizationMethod()
    this.getFenceMethod()
    this.getPersonMethod()
    this.getAreaMethod()
  },
  methods: {
    handleSizeChange (val) {
      this.pageSize = val
      this.getDeviceForm()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.getDeviceForm()
    },
    // 解除绑定
    makeUnbind (row) {
      unBind({ id: row }).then((res) => {
        console.log(res)
        if (res.data.message === '成功') {
          this.$message({
            type: 'success',
            message: res.data.message
          })
          this.getFenceForm()
          this.closeDeleteWindow()
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      })
    },
    submitFormAdd () {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          alert('格式合法，提交数据')
          addDevice({
            authenId: this.addForm.authenId,
            mac: this.addForm.mac,
            name: this.addForm.name,
            employeesId: this.addForm.employeesId,
            serialNumber: this.addForm.serialNumber,
            organizationId: this.addForm.organizationId,
            electronicFenceIds: this.addForm.electronicFenceIds,
            patrolAreaIds: this.addForm.patrolAreaIds,
            bindStatus: 1,
            deviceType: this.addForm.deviceType,
            status: 0
          }).then((res) => {
            console.log(res)
            if (res.data.message === '成功') {
              this.$message({
                type: 'success',
                message: res.data.message
              })
            } else {
              this.$message({
                type: 'error',
                message: res.data.message
              })
            }
            this.getDeviceForm()
            this.dialogTableVisibleEdit = false
          })
        } else {
          console.log('编辑格式不符合要求，请重新编辑')
          return false
        }
      })
    },
    resetForm (ruleForm) {
      this.$refs[ruleForm].resetFields()
    },
    closeDeleteWindow (scope) {
      scope._self.$refs[`popover-${scope.$index}`].doClose()
    },
    closePop () {
      this.$refs.morePop.doClose()
    },
    // 获取设备管理数据
    getDeviceForm () {
      getDevice({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        authenId: this.authenId,
        serialNumber: this.serialNumber,
        name: this.name,
        bindStatus: this.bindStatus,
        id: this.id
      })
        .then((res) => {
          console.log('调用设备管理数据')
          console.log(res)
          this.tableData = res.data.data.records
          this.total = res.data.data.total
          // this.ruleForm.organizationId = this.tableData.groupInfo.id
        }).catch((error) => {
          console.log(error)
        })
    },
    // 触发回车事件
    searchEnter (e) {
      var keyCode = window.Event ? e.keyCode : e.which
      if (keyCode === 13) {
        this.getDeviceForm()
      }
    },
    // 根据设备序列号搜索数据
    search () {
      searchDevice(this.id)
        .then((res) => {
          console.log('搜索表格数据')
          console.log(this.id)
          console.log(res)
        }).catch((error) => {
          console.log(error)
        })
    },
    exportExcel () {
      exportFile(this.currentPage)
        .then((res) => {
          console.log('导出Excel文件')
          console.log(res)
          if (res.status === 200) {
            const blob = res.data
            const fileReader = new FileReader() // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容
            fileReader.readAsDataURL(blob) // 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
            fileReader.onload = (event) => { // 处理load事件。该事件在读取操作完成时触发
              // 新建个下载的a标签，完成后移除。
              const a = document.createElement('a')
              const _fileName = '设备信息表.xls'
              a.download = _fileName
              a.href = event.target.result
              document.body.appendChild(a)
              a.click()
              document.body.removeChild(a)
            }
          }
        })
    },
    downLoadTemplate () {
      downloadFile()
        .then((res) => {
          console.log(res)
          console.log('下载模板')
          if (res.status === 200) {
            const blob = res.data
            const fileReader = new FileReader() // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容
            fileReader.readAsDataURL(blob) // 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
            fileReader.onload = (event) => { // 处理load事件。该事件在读取操作完成时触发
              // 新建个下载的a标签，完成后移除。
              const a = document.createElement('a')
              const _fileName = '设备信息模板.xls'
              a.download = _fileName
              a.href = event.target.result
              document.body.appendChild(a)
              a.click()
              document.body.removeChild(a)
            }
          }
        })
    },
    // 点击打开编辑弹窗
    editClick (index, row) {
      // 编辑弹窗打开
      this.dialogTableVisibleEdit = true
      // 将数据拷贝传入dialog页面
      this.ruleForm = Object.assign(this.ruleForm, row)
      // 传递当前index
      this.ruleForm.index = index
      this.ruleForm.organizationId = this.ruleForm.groupInfo.id
      if (this.ruleForm.fenceInfo.length === 0) {
        this.ruleForm.electronicFenceIds = null
      } else {
        this.ruleForm.electronicFenceIds = this.ruleForm.fenceInfo[0].id
      }
      if (this.ruleForm.employeesInfo === null) {
        this.ruleForm.employeesId = null
      } else {
        this.ruleForm.employeesId = this.ruleForm.employeesInfo.id
      }
      // eslint-disable-next-line no-debugger
      console.log('点击了一行编辑，编辑数数据是：')
      console.log(row)
    },
    // 删除数据
    deleteClick (index, row) {
      this.ruleForm = Object.assign({}, row)
      console.log(this.ruleForm)
      const id = this.ruleForm.id
      deleteDevice(id).then((res) => {
        console.log(res)
        if (res.data.message === '成功') {
          this.$message({
            type: 'success',
            message: res.data.message
          })
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      })
    },
    // 根据设备绑定状态获取设备数据
    getBind () {
      getDevice({
        currentPage: this.currentPage,
        bindStatus: 1
      })
        .then((res) => {
          console.log('已绑定设备数据')
          console.log(res)
          this.tableData = res.data.data.records
          this.total = res.data.data.total
        }).catch((error) => {
          console.log(error)
        })
    },
    getBindNo () {
      getDevice({
        currentPage: this.currentPage,
        bindStatus: 0
      })
        .then((res) => {
          console.log('未绑定设备数据')
          console.log(res)
          this.tableData = res.data.data.records
          this.total = res.data.data.total
        }).catch((error) => {
          console.log(error)
        })
    },
    getOrganizationMethod () {
      getOrganization({ currentPage: -1 })
        .then((res) => {
          console.log('获取组织列表成功')
          console.log(res)
          this.organizations = res.data.data.records
          let obj = {}
          this.organizations.map(function (item) {
            obj = item
            // 替换键，替换成name和value
            obj.label = item.name
            obj.value = item.id
            delete obj.name
            delete obj.id
          })
          console.log(this.organizations)
          // this.addForm.organizationId = this.addForm.organizationId.toString()
        }).catch(err => {
          console.log(err)
          console.log('调用失败')
        })
    },
    getFenceMethod () {
      getFence({ currentPage: -1 })
        .then((res) => {
          console.log('获取电子围栏成功')
          console.log(res)
          this.electronicFence = res.data.data.records
          let objk = {}
          this.electronicFence.map(function (item) {
            objk = item
            // 替换键，替换成name和value
            objk.label = item.name
            objk.value = item.id
            delete objk.name
            delete objk.id
          })
          console.log(this.electronicFence)
        }).catch(err => {
          console.log(err)
          console.log('调用失败')
        })
    },
    getPersonMethod () {
      getPerson({ currentPage: -1 })
        .then((res) => {
          console.log('获取绑定人员信息')
          console.log(res)
          this.employeeIds = res.data.data.records
          let objp = {}
          this.employeeIds.map(function (item) {
            objp = item
            // 替换键，替换成name和value
            objp.label = item.name
            objp.value = item.id
            delete objp.name
            delete objp.id
          })
          console.log(this.employeeIds)
        }).catch(err => {
          console.log(err)
          console.log('调用失败')
        })
    },
    getAreaMethod () {
      getArea({ currentPage: -1 })
        .then((res) => {
          console.log('获取绑定区域信息')
          console.log(res)
          this.areas = res.data.data.records
          let objp = {}
          this.areas.map(function (item) {
            objp = item
            // 替换键，替换成name和value
            objp.label = item.name
            objp.value = item.id
            delete objp.name
            delete objp.id
          })
          console.log(this.areas)
        }).catch(err => {
          console.log(err)
          console.log('调用失败')
        })
    },
    submitFormChange () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          alert('格式合法，提交数据')
          // eslint-disable-next-line no-debugger
          console.log(this.ruleForm)
          changeDevice({
            authenId: this.ruleForm.authenId,
            mac: this.ruleForm.mac,
            name: this.ruleForm.name,
            employeesId: this.ruleForm.employeesId || null,
            serialNumber: this.ruleForm.serialNumber,
            organizationId: this.ruleForm.groupInfo.id.toString(),
            id: this.ruleForm.id,
            electronicFenceIds: this.ruleForm.electronicFenceIds || null,
            patrolAreaIds: this.ruleForm.patrolAreaIds || null,
            bindStatus: 1,
            status: 0,
            deviceType: this.ruleForm.deviceType
          }).then((res) => {
            console.log(this.ruleForm.employeesId)
            console.log(res)
            if (res.data.message === '成功') {
              this.$message({
                type: 'success',
                message: res.data.message
              })
            } else {
              this.$message({
                type: 'error',
                message: res.data.message
              })
            }
            this.dialogTableVisibleEdit = false
          })
        } else {
          alert('编辑格式不符合要求，请重新编辑')
          console.log('编辑格式不符合要求，请重新编辑')
          return false
        }
      })
    }
  }
}
</script>

<style>
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 2px;
  /*滚动条宽度*/
  height: 12px;
  /*滚动条高度*/
  background-color: white;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 0px white;
  -webkit-box-shadow: inset 0 0 0px white;
  background-color: rgb(193, 193, 193);
  /*滚动条的背景颜色*/
  border-radius: 20px;
}
.el-table__fixed {
  height: calc(100% - 12px) !important;
}
.el-table__fixed-right {
  height: calc(100% - 12px) !important;
}
.el-table__fixed-right::before,
.el-table__fixed::before {
  background-color: unset !important;
}
.el-form-item__label {
  font-size: 4px;
  color: rgb(247, 240, 240);
}
.el-form-item__error {
  padding-top: 0;
  padding-bottom: 2px;
  font-size: 2px;
}
.el-form-item {
  margin-bottom: 6px;
}
.el-input__inner::-webkit-input-placeholder {
  font-size: 10px;
}

</style>

<style scoped>
.home {
  overflow: auto;
  display: flex;
  flex-direction: column;
  position: relative;
}
.header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  position: relative;
  width: 100%;
}
/* 下拉选择框 */
.tip >>> .el-input__inner {
  border-radius: 0;
  border: 1px solid #238cd6;
  background-color: #061d3c;
  height: 25px;
  width: 130px;
  margin-right: 5px;
  font-size: 4px;
  color: #fff;
}
.tip >>> .el-scrollbar{
  background-color: #111f3a;
  border-color: #073c75;
  color: #37a5f0;
  font-size: 4px;
}
.tip >>> .el-input__icon {
  line-height: 20px;
  margin-right: 10px;
}
.tip >>> .el-select-dropdown__item {
  font-size: 4px;
  color: #238cd6;
  height: 24px;
  line-height: 24px;
  background-color: #071831;
}
.tip >>> .el-select-dropdown__list {
  background-color: #071831;
}
/* 认证输入框 */
.authentication >>> .el-input__inner {
  border-radius: 0;
  border: 1px solid #238cd6;
  background-color: #061d3c;
  height: 25px;
  margin-right: 5px;
  width: 130px;
}
.input-device >>> .el-input__inner {
  border-radius: 0;
  border: 1px solid #238cd6;
  background-color: #061d3c;
  height: 25px;
  margin-right: 5px;
  width: 130px;
}
.header >>> .el-input__inner::-webkit-input-placeholder {
  color: gray;
  text-align: left;
  font-size: 4px;
}
.el-button {
  width: 60px;
  height: 25px;
  margin-left: 5px;
  padding: 0;
  font-size: 6px;
  border-radius: 0;
}
/* 表格 */
.table {
  margin-left: 20px;
  margin-right: 20px;
}
.table >>> .el-table {
  background-color: #051630;
  color: #238cd6;
  font-size: 6px;
}
.table >>> .el-table__row {
  background-color: #051630;
}
.table >>> .el-table--enable-row-hover .el-table__body tr:hover>td{
  background-color: transparent !important;
}
.table >>> .el-table th, .el-table tr {
  background-color: #051630;
  color: #fff;
  text-align: center;
}
.table >>> .el-table--border {
  border: 1px solid #238cd6;
}
.table >>> .el-table--border td {
  border: 1px solid #238cd6;
}
.table >>> .el-table th.is-leaf {
  border-bottom: 1px solid #238cd6;
}
.table >>> .el-table--border th {
  border-right: 1px solid #238cd6;
}
.table >>> .el-table--border::after, .el-table--group::after, .el-table::before {
  background-color: #238cd6;
}
.table >>> .el-table td {
  padding: 8px 0;
  text-align: center;
}
.edit-button.el-button {
  width: 18px;
}
.delete-button.el-button {
  width: 18px;
}
.edit {
  background-size: 100% 100%;
  width: 18px;
  height: 18px;
}
.table >>> .el-dialog__header {
  padding-top: 0;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}
.delete {
  background-size: 100% 100%;
  width: 18px;
  height: 18px;
}
.lock {
  background-size: 100% 100%;
  width: 18px;
  height: 18px;
}
.header-button {
  float: left;
}
.table >>> .el-table .cell {
  line-height: 12px;
}
/* 分页 */
.block >>> .el-pagination span:not([class*=suffix]) {
  margin-left: 15px;
  color: white;
}
.block {
  margin-top: 10px;
}
.block >>> .el-pagination .btn-prev {
  background-color: #051630;
  color: #fff;
}
.block >>> .el-pagination button:disabled {
  background-color: #051630;
}
.block >>> .el-pager li{
  background-color: #051630;
  color: white;
}
.block >>> .el-pager li.active {
  color: #238cd6;
}
.block >>> .el-pagination .btn-next {
  background-color: #051630;
  color: #fff;
}
.block >>> .el-input__inner {
  border: 1px solid #238cd6;
  background-color: #051630;
  color: #fff;
}
.el-main {
  padding: 0;
}
/* 弹框面板 */
.edit-dialog >>> .el-input__inner {
  height: 30px;
  background-color: #061d3c;
  border: 1px solid #238cd6;
  width: 440px;
  color: #fff;
}
.bottom {
  clear: both;
  text-align: center;
}
.edit-dialog >>> .el-dialog__body {
  padding-bottom: 10px;
  background-size: 100% 100%!important;
  background-image: url(../assets/img/整体效果.png);
}
.edit-dialog >>> .el-dialog {
  background: transparent;
}
</style>
